<!--全咨事业部在建项目进度的编辑弹窗-->
<template>
    <div class="mycontainer">
        <el-form :label-position="labelPosition" ref="form" :model="form" :rules="rules">
            <el-row>
                <el-col span="9">
                    <el-form-item label="项目名称：">
                        <el-input v-model="form.projectName" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="项目编号：">
                        <el-input v-model="form.projectId" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="业主名称：">
                        <el-input v-model="form.customName" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="项目区域：">
                        <el-input v-model="form.projectArea" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="签订合同日期：">
                        <el-input v-model="form.contractGetDate" :disabled="true" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                     <el-form-item label="合同金额（元）：">
                        <el-input v-model="form.contractAmount" :disabled="true" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="项目经理：">
                        <el-input placeholder="请输入内容" v-model="form.projectManager" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="项目类型:">
                        <el-input v-model="form.projectType" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="监管部门:">
                        <el-input placeholder="请输入内容" v-model="form.regulatoryAuthorities" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="工程投资（元）：">
                        <el-input placeholder="请输入内容" v-model="form.projectInvestment" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="9">
                    <el-form-item label="本年度以前完成：" prop="doneBefore">
                        <el-input placeholder="请输入数字，精确到小数点后一位" v-model="form.doneBefore" oninput ="value=value.replace(/[^0-9.]/g,'')">
                            <i slot="suffix">%</i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col span="9" :offset="6">
                    <el-form-item label="进度更新时间:" >
                        <el-date-picker v-model="form.updateTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd hh:mm:ss" style="width:100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 本年度工作内容表格 -->
            <el-row style="width: 100%;">
                <el-col span="24" style="margin-bottom:10px;"><h4>本年度工作内容</h4></el-col>
                <el-col span="24" style="margin-bottom:20px;">
                    <div class="inputDeep1">
                        <el-input placeholder="时间" :disabled="true">
                            <template slot="append">工作内容</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content1">
                            <template slot="prepend">1月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content2">
                            <template slot="prepend">2月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content3">
                            <template slot="prepend">3月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content4">
                            <template slot="prepend">4月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content5">
                            <template slot="prepend">5月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content6">
                            <template slot="prepend">6月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content7">
                            <template slot="prepend">7月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content8">
                            <template slot="prepend">8月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep">
                        <el-input placeholder="请输入内容" v-model="form.work_content9">
                            <template slot="prepend">9月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content10">
                            <template slot="prepend">10月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content11">
                            <template slot="prepend">11月</template>
                        </el-input>
                    </div>
                    <div class="inputDeep" >
                        <el-input placeholder="请输入内容" v-model="form.work_content12">
                            <template slot="prepend">12月</template>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="24">
                <el-form-item label="备注:">
                    <el-input type="textarea" v-model="form.remark" placeholder="请输入内容"></el-input>
                </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span style="text-align:center;display:block;">
              <el-button @click="offSubmit" style="margin-right:20px;">取消</el-button>
              <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
    </div>
</template>
 
<script>
import { InvitationStatisticsTable } from '@/api/bigdata.js';
export default {
  components: {},
  data () {
    var checkWork = (rule, value, callback) => {
      if (value > 100) {
        callback(new Error('请输入100以内的数值'));
      } else {
        callback();
      }
    };
    return {
      labelPosition: 'top',
      form: {
        contractGetDate: '',
        projectId: '',
        projectName: '',
        customName: '',
        contractAmount: '',
        projectType: '',
        projectManager: '',
        projectArea: '',
        projectInvestment: '',
        regulatoryAuthorities: '',
        updateTime: '',
        remark: '',
        doneBefore: '',
        work_content1: '',
        work_content2: '',
        work_content3: '',
        work_content4: '',
        work_content5: '',
        work_content6: '',
        work_content7: '',
        work_content8: '',
        work_content9: '',
        work_content10: '',
        work_content11: '',
        work_content12: ''
      },
      rules: {
        doneBefore: [{ validator: checkWork, trigger: 'blur' }]
      }
    }
  },
  methods: {
    dataInit (data) {
      if (data) {
        //   this.form = data;
        //   console.info(data);
        this.form.contractGetDate = data.contractGetDate;
        this.form.projectId = data.projectId;
        this.form.projectName = data.projectName;
        this.form.customName = data.customName;
        this.form.contractAmount = data.contractAmount;
        this.form.projectType = data.projectType;
        this.form.projectManager = data.projectManager;
        this.form.projectArea = data.projectArea;
        this.form.projectInvestment = data.projectInvestment;
        this.form.regulatoryAuthorities = data.regulatoryAuthorities;
        this.form.updateTime = data.updateTime;
        this.form.remark = data.remark;
        this.form.doneBefore = data.doneBefore;
        this.loadContent();
      }
    },
    loadContent () {
      // if(JSON.stringify(this.form.work))
      let params = {
        projectId: this.form.projectId
      }
      return new Promise((resolve, reject) => {
        console.info(this.form.projectId);
        InvitationStatisticsTable.listContent(this, params).then(res => {
          console.info('绑定数据');
          this.form.work_content1 = res.data[0].work_content1;
          this.form.work_content2 = res.data[0].work_content2;
          this.form.work_content3 = res.data[0].work_content3;
          this.form.work_content4 = res.data[0].work_content4;
          this.form.work_content5 = res.data[0].work_content5;
          this.form.work_content6 = res.data[0].work_content6;
          this.form.work_content7 = res.data[0].work_content7;
          this.form.work_content8 = res.data[0].work_content8;
          this.form.work_content9 = res.data[0].work_content9;
          this.form.work_content10 = res.data[0].work_content10;
          this.form.work_content11 = res.data[0].work_content11;
          this.form.work_content12 = res.data[0].work_content12;
        }).catch(e => {
          reject(e);
        });
      });
    },

    offSubmit () {
      this.$emit('closeWindow');
    },
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            ...this.form
          }
          return new Promise((resolve, reject) => {
            InvitationStatisticsTable.updateProjectSchedule(this, params).then(res => {
              this.$message({
                showClose: true,
                message: '编辑成功！',
                type: 'success',
                offset: '300',
                onClose: () => {
                  this.$emit('updateWindow');
                }
              });
            }).catch(e => {
              reject(e);
            });
          });
        } else {
          this.$message({
            showClose: true,
            message: '编辑失败！',
            type: 'error',
            offset: '300'
          });
          return false;
        }
      });
    }
  }
}
</script>
<style>
    .mycontainer {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .el-input-group__prepend {
    background-color: #fff;
    border-radius: 0px;
    width: 10%;
    text-align: center;
    }
    .el-input-group__append {
    border-radius: 0px;
    width: 90%;
    text-align: center;
    }
</style>
<style scoped>
  /* 利用穿透，设置input边框隐藏以及无圆角 */
  .inputDeep>>>.el-input__inner {
    border: 1;
    border-radius: 0px;
  }
  /* 如果你的 el-input type 设置成textarea ，就要用这个了 */
  .inputDeep>>>.el-textarea__inner {
    border: 0;
    resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
  }

  .inputDeep1>>>.el-input__inner {
    border: 1;
    border-radius: 0px;
    text-align: center;
  }
</style>
